<template>
	<view class="uni-popup-share">
		<view class="uni-share-title"><text class="uni-share-title-text">{{shareTitleText}}</text></view>
		<view class="uni-share-content">
			<view class="uni-share-content-box">
				<view class="uni-share-content-item" @tap.stop="poster()">
					<button class="st">
						<image class="uni-share-image" :src="$IMG_URL+'/imgs/share/share_poster.png'" mode="aspectFill">
						</image>
						<text class="uni-share-text">保存海报</text>
					</button>
				</view>
				<view class="uni-share-content-item" @tap.stop="share()">
					<button class="st shareBtn" open-type="share">
						<image class="uni-share-image" :src="$IMG_URL+'/imgs/share/share_wx.png'" mode="aspectFill">
						</image>
						<text class="uni-share-text">微信</text>
					</button>
				</view>
			</view>
		</view>
		<view class="uni-share-button-box">
			<button class="uni-share-button" @click="close">{{cancelText}}</button>
		</view>
	</view>
</template>

<script>
	import popup from '@/uni_modules/uni-popup/components/uni-popup/popup.js';
	// import {msg} ffrom '@/common/'
	/* 	import {
			initVueI18n
		} from '@dcloudio/uni-i18n' */
	// import messages from '@/uni_modules/uni-popup/i18n/index.js'
	// const {	t	} = initVueI18n(messages)
	export default {
		name: 't-share',
		mixins: [popup],
		emits: ['select'],
		props: {
			title: {
				type: String,
				default: ''
			},
			beforeClose: {
				type: Boolean,
				default: false
			}
		},
		data() {
			return {
				requestIng: false,
				bottomData: [{
						text: '保存海报',
						icon: 'https://vkceyugu.cdn.bspapp.com/VKCEYUGU-dc-site/c2b17470-50be-11eb-b680-7980c8a877b8.png',
						name: 'poster'
					},
					{
						text: '微信',
						icon: 'https://vkceyugu.cdn.bspapp.com/VKCEYUGU-dc-site/c2b17470-50be-11eb-b680-7980c8a877b8.png',
						name: 'wx'
					},
					/* {
							text: '微信',
							icon: 'https://vkceyugu.cdn.bspapp.com/VKCEYUGU-dc-site/c2b17470-50be-11eb-b680-7980c8a877b8.png',
							name: 'wx'
						},
					{
						text: '支付宝',
						icon: 'https://vkceyugu.cdn.bspapp.com/VKCEYUGU-dc-site/d684ae40-50be-11eb-8ff1-d5dcf8779628.png',
						name: 'wx'
					},
					{
						text: 'QQ',
						icon: 'https://vkceyugu.cdn.bspapp.com/VKCEYUGU-dc-site/e7a79520-50be-11eb-b997-9918a5dda011.png',
						name: 'qq'
					},
					{
						text: '新浪',
						icon: 'https://vkceyugu.cdn.bspapp.com/VKCEYUGU-dc-site/0dacdbe0-50bf-11eb-8ff1-d5dcf8779628.png',
						name: 'sina'
					},
					{
						text: '百度',
						icon: 'https://vkceyugu.cdn.bspapp.com/VKCEYUGU-dc-site/1ec6e920-50bf-11eb-8a36-ebb87efcf8c0.png',
						name: 'copy'
					},
					{
						text: '其他',
						icon: 'https://vkceyugu.cdn.bspapp.com/VKCEYUGU-dc-site/2e0fdfe0-50bf-11eb-b997-9918a5dda011.png',
						name: 'more'
					} */
				]
			}
		},
		created() {},
		computed: {
			cancelText() {
				return '取消'
			},
			shareTitleText() {
				return this.title || '请选择分享方式'
			}
		},
		methods: {
			/**
			 * 选择内容
			 */
			share() {
				/* this.$emit('select', {
					item,
					index
				}) */
				this.close()

			},
			poster() {
				let that = this;
				!that.requestIng && ((that.requestIng = true, that.$util.loading('海报生成中')),
					that.$http('user.shareImg', {}).then(res => {
						console.log('res', res)
						that.requestIng = false
						uni.hideLoading()
						if (res.code == 1) {
							uni.downloadFile({
								url: res.data, //仅为示例，并非真实的资源
								success: (res) => {
									if (res.statusCode === 200) {
										console.log('下载成功');
										uni.saveImageToPhotosAlbum({ //保存图片到系统相册。
											filePath: res.tempFilePath, //图片文件路径
											success: function() {
												that.$util.msg('保存成功');
												that.popup.close()
											},
											fail: function(e) {
												console.log(e);
												that.$util.msg('保存失败');
											}
										});
									}
								},
								fail: (err) => {
									console.log('下载失败', err);
									that.$util.msg('海报保存失败')
								}
							});
						} else {
							that.$util.msg(res.msg || '海报生成失败')
						}
					}).catch(err => {
						that.requestIng = false
						uni.hideLoading()
					}))
			},
			/**
			 * 关闭窗口
			 */
			close() {
				if (this.beforeClose) return
				this.popup.close()
			}
		}
	}
</script>
<style lang="scss">
	.uni-popup-share {
		background-color: #fff;
		border-top-left-radius: 11px;
		border-top-right-radius: 11px;
	}

	.uni-share-title {
		/* #ifndef APP-NVUE */
		display: flex;
		/* #endif */
		flex-direction: row;
		align-items: center;
		justify-content: center;
		height: 40px;
	}

	.uni-share-title-text {
		font-size: 14px;
		color: #666;
	}

	.uni-share-content {
		/* #ifndef APP-NVUE */
		display: flex;
		/* #endif */
		flex-direction: row;
		justify-content: center;
		padding-top: 10px;
	}

	.uni-share-content-box {
		/* #ifndef APP-NVUE */
		display: flex;
		/* #endif */
		flex-direction: row;
		flex-wrap: wrap;
		width: 360px;
	}

	.uni-share-content-item {
		// width: 90px;
		/* #ifndef APP-NVUE */
		display: flex;
		/* #endif */
		flex-direction: column;
		justify-content: center;
		padding: 10px 0;
		align-items: center;
		flex: 1;
	}

	.uni-share-content-item:active {
		background-color: #f5f5f5;
	}

	.uni-share-image {
		width: 30px;
		height: 30px;
	}

	.uni-share-text {
		margin-top: 10px;
		font-size: 14px;
		color: #3B4144;
	}

	.uni-share-button-box {
		/* #ifndef APP-NVUE */
		display: flex;
		/* #endif */
		flex-direction: row;
		padding: 10px 15px;
	}

	.uni-share-button {
		flex: 1;
		border-radius: 50px;
		// color: #666;
		font-size: 16px;
	}

	.uni-share-button::after {
		border-radius: 50px;
	}

	.st {
		width: 100%;
		height: 100%;
		display: flex;
		flex-direction: column;
		justify-content: center;
		align-items: center;
		background: #fff;
	}

	.shareBtn {
		// padding: 10px 0;
		// flex: 1;
	}
</style>
